<?php
// Load HTML Header
include('templates/html_head.php');

/**
 * Template for mobile version
 */
?>

<div data-role="page" id="page-home" data-theme="c" data-content-theme="c">

    <div data-role="header">
        <p><h1>my-dx600a</h1></p>
    </div><!-- /header -->

    <div data-role="content">	
        <p><img id="home-image"src="images/dx600a_medium.png" alt="DX600A" /></p>
        <p><a href="#page-contacts" data-role="button">Contacts</a></p>
        <p><a href="#page-dial" data-role="button">Dial</a></p>
        <p><a href="#page-details" data-role="button">Details</a></p>
        <p><a href="#page-settings" data-role="button">Settings</a></p>
    </div><!-- /content -->

    <div data-role="footer">
        <p></p>
    </div><!-- /footer -->
</div><!-- /page-home -->

<div data-role="page" id="page-contacts" data-theme="c" data-content-theme="c">

    <div data-role="header">
        <p><h1>Contacts</h1></p>
    </div><!-- /header -->

    <div data-role="content">	
        <div id="contacts-list" data-role="collapsible-set"></div>
    </div><!-- /content -->

    <div data-role="footer" class="ui-bar">
        <a href="#page-home" data-role="button" data-icon="back">Back</a>
    </div><!-- /footer -->

    <script>
        $( document ).delegate("#page-contacts", "pagebeforecreate", function() {
            $.get("index.php", { module: "contacts" },
            function(data){
                var obj = jQuery.parseJSON(data)
                $.each(obj, function(key, val) {
                    var element = "" + 
                        '<div data-role="collapsible">' +
                        '<h1>' + val.surename + ' ' + val.lastname + '</h1>' +
                        '<p>Home: ' + val.tel_home + '</p>' +
                        '<p>Work: ' + val.tel_work + '</p>' +
                        '<p>Mobile: ' + val.tel_mobile + '</p>' +
                        '</div>';
                    $('#contacts-list').append(element);
                });
                $('#contacts-list').trigger('create');
            });

        });
    </script>
</div><!-- /page-contacts -->

<div data-role="page" id="page-dial" data-theme="c" data-content-theme="c">

    <div data-role="header">
        <p><h1>Dial</h1></p>
    </div><!-- /header -->

    <div data-role="content">	
        <input type="text" id="dial-number" value="" placeholder="Number to call"/>
        <a href="" id="dial-clear" data-role="button" data-icon="delete">Clear</a>
        <div class="ui-grid-b">
            <div class="ui-block-a dial-bt-number"><a href="" id="dial-one" data-role="button">1</a></div>
            <div class="ui-block-b dial-bt-number"><a href="" id="dial-two" data-role="button">2</a></div>
            <div class="ui-block-c dial-bt-number"><a href="" id="dial-three" data-role="button">3</a></div>
            <div class="ui-block-a dial-bt-number"><a href="" id="dial-four" data-role="button">4</a></div>
            <div class="ui-block-b dial-bt-number"><a href="" id="dial-five" data-role="button">5</a></div>
            <div class="ui-block-c dial-bt-number"><a href="" id="dial-six" data-role="button">6</a></div>
            <div class="ui-block-a dial-bt-number"><a href="" id="dial-seven" data-role="button">7</a></div>
            <div class="ui-block-b dial-bt-number"><a href="" id="dial-eight" data-role="button">8</a></div>
            <div class="ui-block-c dial-bt-number"><a href="" id="dial-nine" data-role="button">9</a></div>
            <div class="ui-block-a dial-bt-number"><a href="" id="dial-asterisk" data-role="button">*</a></div>
            <div class="ui-block-b dial-bt-number"><a href="" id="dial-zero" data-role="button">0</a></div>
            <div class="ui-block-c dial-bt-number"><a href="" id="dial-hash" data-role="button">#</a></div>
        </div>
        <p><a href="" id="dial-call" data-role="button" data-icon="grid">Call</a></p>
        <div id="dial-log"></div>
    </div><!-- /content -->

    <div data-role="footer" class="ui-bar">
        <a href="#page-home" data-role="button" data-icon="back">Back</a>
    </div><!-- /footer -->
    <script>
        $('#dial-call').bind( "click", function(event, ui) {
            $('#dial-number').textinput('disable');
            $('#dial-log').append('Starting call...<br />');
            $.get("index.php", { module: "dial", number: $('#dial-number').val() },
            function(data){

                $('#dial-number').textinput('enable');
                $('#dial-log').append('Call finished!<br />');
                $('#dial-log').append('Result: ' + data);
            });
        
        });

        $('#dial-clear').bind( "click", function(event, ui) {
            $("#dial-number").val(" ");
        });

        $('.dial-bt-number').bind( "click", function(event, ui) {
            var current_number = $("#dial-number").val();
            var pressed_number = $(this).text();
            $("#dial-number").val(current_number + pressed_number);
        });
    
    </script>
</div><!-- /page dial-->

<div data-role="page" id="page-details" data-theme="c" data-content-theme="c">

    <div data-role="header">
        <p><h1>Details</h1></p>
    </div><!-- /header -->

    <div data-role="content">	

    </div><!-- /content -->

    <div data-role="footer">
        <p><a href="#page-home" data-role="button">Back</a></p>
    </div><!-- /footer -->
</div><!-- /page-details -->

<div data-role="page" id="page-settings" data-theme="c" data-content-theme="c">

    <div data-role="header">
        <p><h1>Settings</h1></p>
    </div><!-- /header -->

    <div data-role="content">	

    </div><!-- /content -->

    <div data-role="footer">
        <p><a href="#page-home" data-role="button">Back</a></p>
    </div><!-- /footer -->
</div><!-- /page-settings -->

<?php
// Load HTML Footer
include('templates/html_foot.php');
?>
